<script setup>
import {ref} from 'vue';
import ChatMessage from "@/components/Chat/ChatMessage.vue";

const messages = ref([]);
const newMessage = ref('');

const sendMessage = () => {
  if (newMessage.value.trim()) {
    messages.value.push({
      isUser:true,
      Props:{
        book:{
          imageSrc: 'https://example.com/user-avatar.jpg'
        }
      },
      message: {
        content: newMessage.value,
      }
    }
    );
    // 模拟 AI 响应
    setTimeout(() => {
      messages.value.push({
        isUser:false,
        Props:{
          book:{
            imageSrc: ''
          }
        },
        message: {
          content: '这是助手回复的测试消息'
        }
      });
    }, 1000);
    newMessage.value = '';
  }
};

</script>

<template>

  <div class="chat-container">
    <el-card class="box-card chat-history">
      <template #header>
        <div class="card-header">
          <span>聊天记录</span>
        </div>
      </template>
      <div v-for="(message, index) in messages" :key="index" class="text item">
        <ChatMessage
            :isUser="message.isUser"
            :Props="message.Props"
            :message="message.message"
        >
        </ChatMessage>
      </div>
    </el-card>
    <el-card class="box-card chat-input">
      <template #header>
        <div class="card-header">
          <span>新消息</span>
        </div>
      </template>
      <div class="input-container">
        <el-input 
        v-model="newMessage" 
        type="textarea" 
        placeholder="在此处输入您的信息..." 
        @keyup.enter="sendMessage" 
        :autosize="{ minRows: 2, maxRows: 4 }"
        :rows="3"
        >
        </el-input>
        <el-button type="primary" @click="sendMessage">发送</el-button>
      </div>
    </el-card>
  </div>
</template>


<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.box-card {
  width: 90%;
  margin: 20px auto;
}

.chat-history {
  flex-grow: 1;
  overflow-y: scroll;
}

.text.item {
  padding: 4px 0;
}

.chat-history {
  height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 15px;
}


.chat-input {
  margin-top: 20px;
  height: 270px;
}

.input-container {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.input-container .el-input {
  flex: 1;
  height: 40px !important;
  min-width: 0;
}

.input-container .el-button {
  white-space: nowrap;
  padding: 0 15px;
}


.input-container .el-button:hover {
  background-color: #4096ff;
}
</style>
